import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {quickProvider} from "@/providers/quick-provider.ts";

// 使用 @customElement 装饰器定义组件名称
@customElement('search-view')
export class SearchView extends LitElement {
  // 定义一个响应式属性用于绑定输入框的值
  @property({ type: String }) searchQuery = '';

  // 定义组件的样式
  static styles = css`
      :host {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: calc(100vh - 130px);
          padding: 16px 0 0 0;
          //background-color: #f9f9f9;
          font-family: Arial, sans-serif;
      }

      .search-container {
          display: flex;
          gap: 12px;
          width: 50vw;
      }

      .search-bottom-bar {
          width: 50vw;
          margin: 16px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 12px;
          padding: 12px;
      }

      .quick-item {
          display: flex;
          flex-direction: column;
          width: 84px;
          height: 84px;
          border-radius: 8px;
          background-color: #f3f3f3;
          text-decoration: none; /* 去掉下划线 */
          justify-content: center;
          align-items: center;
          padding: 12px;
          color: gray;
      }

      input {
          width: 40vw;
          padding: 16px 20px;
          font-size: 16px;
          border: 0 solid #ccc;
          border-radius: 8px; /* 8dp 圆角 */
          background-color: #f3f3f3; /* 白色背景 */
          outline: none; /* 去除聚焦时的轮廓 */
          color: black;
      }

      button {
          padding: 12px 20px;
          font-size: 16px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s ease; /* 添加过渡效果 */
      }

      button:hover {
          background-color: #0056b3;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <div class="search-container">
        <input
            type="text"
            placeholder="请输入搜索内容"
            .value=${this.searchQuery}
            @input=${this.handleInputChange}
        />
        <button @click=${this.handleSearchClick}>百度搜索</button>
      </div>
      <div class="search-bottom-bar">
        ${quickProvider.map((item) => {
          return html`
            <a class="quick-item" href="${item.url}" target="_blank">
              <img 
                  style="width: 48px;height: 48px;"
                  src="https://favicon.im/${item.icon}"  alt="${item.name}"/>
              <div style="margin-top: 12px;">
                ${item.name}
              </div>
            </a>
          `;
        })}
      </div>
    `;
  }
// 处理输入框内容变化
  private handleInputChange(event: Event) {
    this.searchQuery = (event.target as HTMLInputElement).value;
  }

  // 处理搜索按钮点击事件
  private handleSearchClick() {
    if (this.searchQuery) {
      const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(this.searchQuery)}`;
      window.open(searchUrl, '_blank'); // 在新窗口中打开百度搜索[^16^]
    }
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'search-view': SearchView;
  }
}